<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta charset="utf-8" />
	<title></title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/bootstrap-select.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
	<link href="../css/bootstrap-table.css" rel="stylesheet">
	<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
	<link href="../js/layui/css/layui.css" rel="stylesheet">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-select.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
	<script type="text/javascript" src="../js/layui/layui.js"></script>
	<script type="text/javascript" src="../js/layui/exts/transferTable.js"></script>
	<script type="text/javascript" src="../js/jyy_modal.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script type="text/javascript" src="../js/echarts.js"></script>
	<script type="text/javascript" src="../../utils/CommonUtil.js"></script>

	<style>
	.heidenbt{
		display: none
	}
	#sectionAttrTableDiv thead tr:first-child {
		background-color: #4090E7;
        position:sticky;
        padding-top:10px;
        top: 0px;
    }
    #lineAttrTableDiv .fixed-table-border {
    	display: none;
    }
    #lineAttrTableDiv .bootstrap-table .fixed-table-container.fixed-height:not(.has-footer) {
    	border-bottom: none;
    }
</style>
	<script type="text/javascript">
		var table = null;
		var projectId =  getQueryString("projectId")||'88888888888';
		$(function(){
			getDatePicker();
			getSelectDatas();
		});
		function selectData(){
			var dateSel =  $('#dateSel').val(); 
			var sectionNames =  $('#sectionNames').val();
			if(JyyCommon.isEmpty(dateSel)){
				JyyMsgBox.alert({ title:"警告", message:"[日期]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(sectionNames.length == 0){
				JyyMsgBox.alert({ title:"警告", message:"[断面名称]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(sectionNames.length > 12){
				JyyMsgBox.alert({ title:"警告", message:"[断面名称]不可超过12个",type:"warning"}).on(function (e) {});
				return false;
			}
			JyyModelLoading.start("sectionAttrTableDiv");
			$.when(getEcahtData(projectId, sectionNames, "selectSectionAttrTableData")).done(function(data){
				createTable(data.respData, 1);
				JyyModelLoading.end("sectionAttrTableDiv");
			});
			JyyModelLoading.start("sectionMeritEchartDiv");
			$.when(getEcahtData(dateSel, sectionNames, "selectSectionMeritEchatData")).done(function(echatData){
				createEchat(echatData.respData, 1);
				JyyModelLoading.end("sectionMeritEchartDiv");
			});
			JyyModelLoading.start("sectionMonthEchartDiv");
			$.when(getEcahtData(dateSel, sectionNames, "selectSectionMonthEchatData")).done(function(echatData){
				createEchat(echatData.respData, 2);
				JyyModelLoading.end("sectionMonthEchartDiv");
			});
			JyyModelLoading.start("sectionYearEchartDiv");
			$.when(getEcahtData(dateSel, sectionNames, "selectSectionYearEchatData")).done(function(echatData){
				createEchat(echatData.respData, 3);
				JyyModelLoading.end("sectionYearEchartDiv");
			});
		}

		function createTable(tableData, code) {
			var id = "";
			var table = {};
			if(code == 1) {
				id = "sectionAttrTable";
				table = {
			    	cache: false,
			    	height: 227,
			        theadClasses: "bg-primary",
			    	columns: [{field:"sectionname", title:"断面名称",halign:"center",align:"center"},
			    			  {field:"linename", title:"包含线路",halign:"center",align:"center"},
			    			  {field:"sectionsign", title:"线路方向",halign:"center",align:"center"},
			    			  {field:"areabegin", title:"线路起始节点",halign:"center",align:"center"},
			    			  {field:"areaend", title:"线路终止节点",halign:"center",align:"center"}],
			    	data: tableData.data,
			    };
			}
			$('#'+id).bootstrapTable('destroy').bootstrapTable(table);
		}

		function createEchat(echartData, code) {
			var id = "";
			var option = {};
			var xAxisName = "";
			var yAxisName = "MW";
			var csvName = "echartData";
			if(code == 1) {
				id = "sectionMeritEchart";
				xAxisName = "时刻";
				csvName = "断面有功潮流";
			} else if(code == 2) {
				id = "sectionMonthEchart";
				xAxisName = "日";
				yAxisName = "MWh";
				csvName = "断面月输送电量";
			} else if(code == 3) {
				id = "sectionYearEchart";
				xAxisName = "月份";
				yAxisName = "MWh";
				csvName = "断面年输送电量";
			}
			var xAxisData = echartData.xAxisData;
			var seriesData = [];
			for(var i = 0; i < echartData.seriesData.length;i++) {
				seriesData.push({
					name: echartData.seriesData[i].name,
					type: 'line',
				    data: echartData.seriesData[i].series
				});
			}
			option = {
			  	tooltip: {
			    	trigger: 'axis',
			    	axisPointer: {
			      		type: 'cross',
			      		label: {
			        		backgroundColor: '#6a7985'
			      		}
			    	},
			    	position: function(point, params, dom, rect, size) {
			             //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
			             var x = point[0]; //
			             var y = point[1];
			             var viewWidth = size.viewSize[0];
			             var viewHeight = size.viewSize[1];
			             var boxWidth = size.contentSize[0];
			             var boxHeight = size.contentSize[1];
			             var posX = 0; //x坐标位置
			             var posY = 0; //y坐标位置

			             if (x < boxWidth) { //左边放不开
			                 posX = 5;
			             } else { //左边放的下
			                 posX = x - boxWidth;
			             }

			             if (y < boxHeight) { //上边放不开
			                 posY = 5;
			             } else { //上边放得下
			                 posY = y - boxHeight;
			             }

			             return [posX, posY];
			         }
			  	},
				toolbox: {
					show: true,
					right: 30,
				    itemSize: 20,
					itemGap: 12,
			        feature: {
			        	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = csvName + `.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:csvName,icon:"image://../images/downpic.png"}
			        }
			    },
			    graphic: [{
                	type: 'group',
                    // rotation: Math.PI / 2,
                    bounding: 'raw',
                    right:200,
                    top: 20,
                    z: 100,
                    children: [{
                    	type: 'text',
                        left: 'center',
                        top: 'center',
                        z: 100,
                        style: {
                        	fill: '#000',
                            text: '日期：'+$("#dateSel").val(),
                            font: 'normal 16px sans-serif'
                        }
                	}]
                }],
			  	grid: {
			    	left: '3%',
			    	right: '8%',
			    	bottom: '3%',
			    	containLabel: true
			  	},
			  	xAxis: [{
			    	type: 'category',
			    	name: xAxisName,
			      	data: xAxisData
			    }],
			  	yAxis: [{
			      	type: 'value',
			      	name: yAxisName
			    }],
				legend: {},
			  	series: seriesData
			};
			var chartDom = document.getElementById(id);
			var myChart = echarts.init(chartDom);
			myChart.clear();
			myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
		
		//查询
		function select(){
			selectData();
		}
		// 打开自定义断面弹窗
		function openDialog() {
			initTable();
			$("#wizardMask").show();
			$("#sectionPop").show();
		}
		function closeDialog() {
			$("#wizardMask").hide();
			$("#sectionPop").hide();
		}

		function getQueryString (name){
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			return r ? unescape(r[2]) : null;
		}

		function getDatePicker(){
			$.ajax({
				url: "Sample/selectSectionAnalysisDate",
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId }),
				contentType:"application/json",
	            success:function(data){
	            	if(!data.respData.readOnly){
		    			$("#dateSel").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(data.respData.startDate),
		    				endDate : new Date(data.respData.endDate)
		    			});
		    			$("#dateSel").datetimepicker("setDate", new Date(data.respData.startDate));
		            	selectData();
	            	} else {
		    			$("#dateSel").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(),
		    				endDate : new Date()-1000*60*60*24
		    			});
						JyyMsgBox.alert({ title:"警告", message:"暂无相关数据",type:"warning"}).on(function (e) {});
	            	}
	            }
			});
		}

		function getSelectDatas(){
			$.ajax({
				url: "Sample/getSectionAnalysis",
				type:'POST',
				async:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId }),
				contentType:"application/json",
		        success:function(data){
					var content = '';
					$.each(data.respData.sectionname,function(i,n){
						if(i == 0){
							content += "<option value='" + n + "' selected>"+ n+"</option>";
						} else {
							content += "<option value='" + n + "'>"+ n +"</option>";
						}
					});
					$("#sectionNames").html(content);
					$('.selectpicker').selectpicker('refresh');
		        }
			});
		}
		function initTable() {
			invoke("getSectionLineContainer", { projectId : projectId }, function(data){
				layui.config({
					base:'../js/layui/exts/'
				}).use(['transfer','form','table'], function(){
					var transfer = layui.transfer,$=layui.$,form = layui.form,table = layui.table;
					var cols1 = [
							{checkbox: true, fixed: true}
							,{field:'lineid', title: 'ID',hide:true} 
							,{field:'linename', title: '待选路线'}
							,{field:'bnode', title: '起始节点'}
							,{field:'enode', title: '终止节点'}
							]
					var cols2 = [
						{checkbox: true, fixed: true}
						,{field:'lineid', title: 'ID',hide:true} 
						,{field:'linename', title: '断面包含线路'}
						,{field:'bnode', title: '起始节点'}
						,{field:'enode', title: '终止节点'}
						,{field:'direction', title: '线路方向', templet: function (d) {
	                        // 模板的实现方式也是多种多样，这里简单返回固定的
	                        return '<select name="direction" lay-filter="direction" data-value="1" class="layui-border">' +
			                		'<option value="1">正向</option>' +
			                		'<option value="-1">反向</option>' +
			              		'</select>';}}
						]
					var tabConfig = {'page': {layout: ['prev', 'page', 'next', 'count', 'skip']}, 'height': 277, 
						done:function (res, curr, count) {
		                count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');
		                layui.each($('select'), function (index, item) {
		                    var elem = $(item);
		                    elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
		                });
		                form.render();
		                tdTitle();
		            }}
					var tb = transfer.render({
						elem: '#transfer'
						,data: [data.line, []]
						,cols: [[cols1],[cols2]]
						,tabConfig: tabConfig
					});
					
					$('#searchLine').on('click', function () {
						var d = [];
						var linename = $("#lineName").val();
						if(linename != ""){
							for(var i = 0;i < data.line.length;i++) {
								if(data.line[i].linename.indexOf(linename) != -1) {
									d.push(data.line[i]);
								}
							}
						} else {
							d = data.line;
						}
						d = d.filter(x => !transfer.data[1].data.some(y => y.lineid  === x.lineid ))
						tb = transfer.render({
							elem: '#transfer'
							,data: [d, transfer.data[1].data]
							,cols: [[cols1],[cols2]]
							,tabConfig: tabConfig
						});
					});
					
					$('#saveBtn').on('click', function () {
						$("#saveBtn").attr("disabled", true)
			            var data = transfer.get(tb, 'r', '');
			            var sectionName = $("#sectionName").val();
			            var forwardCap = $("#forwardCap").val();
			            var reverseCap = $("#reverseCap").val();
						if(JyyCommon.isEmpty(sectionName)){
							layer.msg("[定义断面名称]不可为空");
							$("#saveBtn").attr("disabled", false)
							return false;
						}else if(JyyCommon.isEmpty(forwardCap)){
							layer.msg("[正向传输容量(MVA)]不可为空");
							$("#saveBtn").attr("disabled", false)
							return false;
						}else if(JyyCommon.isEmpty(reverseCap)){
							layer.msg("[反向传输容量(MVA)]不可为空");
							$("#saveBtn").attr("disabled", false)
							return false;
						} else if(data.length == 0) {
							layer.msg("已选择线路条数不可为空");
							$("#saveBtn").attr("disabled", false)
							return false;
						} else {
							invoke("saveSectionLineContainer", { projectId : projectId,sectionName:sectionName,forwardCap:forwardCap,
								reverseCap:reverseCap,line:data }, function(data){
								if(data.code == -1) {
									layer.msg(data.msg);
									$("#saveBtn").attr("disabled", false)
								} else if(data.code == 1) {
									layer.msg(data.msg);
									location.reload();
								}
							});
						}
			            return false;
			        });
					form.on('select(direction)', function (data) {
						if($("div[lay-id=right-table-"+tb.index+"]").find(this).length == 0) return;
						var elem = $(data.elem);
			            var trElem = elem.parents('tr');
			            var tableData = table.cache['right-table-'+tb.index]; // grid为table id
			            // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
			            tableData[trElem.data('index')][elem.attr('name')] = data.value;
		            })
				})
			});
		}
		function tdTitle(){

		    $('th').each(function(index,element){

		        $(element).attr('title',$(element).text());

		    });

		    $('td').each(function(index,element){

		        $(element).attr('title',$(element).text());

		    });

		};
		
		function getEcahtData(date, sectionNames, method){
			var res = $.ajax({
				url: "Sample/"+method,
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId, date : date,sectionNames : sectionNames }),
				contentType:"application/json",
	            success:function(data){
					return data;
	            }
			});
			return res;
		}

		function onlyNum(event, obj) {
			//响应鼠标事件，允许左右方向键移动 
		    event = window.event||event; 
		    if(event.keyCode == 37 | event.keyCode == 39){ 
		        return; 
		    } 
		    //先把非数字的都替换掉，除了数字和. 
		    obj.value = obj.value.replace(/[^\d.]/g,""); 
		    //必须保证第一个为数字而不是. 
		    obj.value = obj.value.replace(/^\./g,""); 
		    //保证只有出现一个.而没有多个. 
		    obj.value = obj.value.replace(/\.{2,}/g,"."); 
		    //保证.只出现一次，而不能出现两次以上 
		    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 
		}

		function invoke(url, args, callback){
			var r, op = {
					url: '../g/service/Sample/' + url,
					type:'POST',
					cache:false,
					async:true,
					dataType:'json',
					data:args ? JSON.stringify(args) : null,
					contentType:"application/json"
				};
			if(typeof callback == 'function'){
				op.success = function(data){
					if(data.error)return alert(data.error);
					callback(data);
				}
			} else {
				op.async = false;
				op.success = function(data){
					r = data
				};
			}
			$.ajax(op);
			if(r)if(r.error){
				alert(r.error);
				return null;
			}
			return r;
		};
	</script>
	<script type="text/html" id="directionTpl">
  		<select id="direction" lay-filter="direction" class="layui-border" lay-ignore>
    		<option value="1">正向</option>
    		<option value="-1">反向</option>
  		</select>
	</script>
<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.selBtn {
		float:left;
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
	.selBtn:hover {
		background-color: #00BFFF;
	}
	.shadow {
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		float: left;
	}
	.pop {
		width: 90%;
		min-width: 1000px;
		height: 490px;
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;margin: auto;
		background: #fff;
		display: none;
	}
	.ppBody {
		position: absolute;
		left: 18px;top: 150px;
		width: calc(100% - 36px);
		height: 290px;
		border: 1px solid #9DC6F2;
		border-radius: 5px;
	}
	.layui-container {
		width: 100%;
	}
	.layui-col-md2 {
		width: 9%;
	}
	.layui-col-md5 {
	    width: 45.5%;
	}
	#transfer td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }
    #sectionAttrTable+.fixed-table-border {
	    margin-left: 10%;
	}
</style>
</head>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">日期</label>
            <input id="dateSel" class="form-control" placeholder="请选择日期" readonly style="float: left;margin-top: -3px;padding: 5px;width: 184px;font-weight: normal;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">断面名称</label>
			<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					id="sectionNames" title="请选择断面" data-none-results-text="未找到相关断面{0}" data-select-all-text="全选" data-deselect-all-text="取消全选"
					data-width="250px" data-size="10" data-count-selected-text="已选择{1}个断面中的{0}个"></select>

			<button class="selBtn" onclick=select()>查询</button>
			<button class="selBtn" style="width: 80px;" onclick=openDialog()>自定义断面</button>
		</div>
	</div>
	<div id="sectionAttrTableDiv" class="shadow" style="width: calc(100% - 40px);height: 270px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">断面属性</span>
		</p>
		<table id="sectionAttrTable" style="width: 80%;margin-left: 10%;overflow-y: scroll;"></table>
	</div>
	<div id="sectionMeritEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">断面有功潮流</span>
		</p>
		<div id="sectionMeritEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	<div id="sectionMonthEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">断面月输送电量</span>
		</p>
		<div id="sectionMonthEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	<div id="sectionYearEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">断面年输送电量</span>
		</p>
		<div id="sectionYearEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
</div>
<div id="wizardMask" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background:#000000;filter:alpha(Opacity=60);opacity:0.6;overflow: hidden;display:none;"></div>
<div id="sectionPop" class="pop">
	<div style="position:absolute;top:0px;left: 8px;width:calc(100% - 16px);height:50px;border-bottom: 2px solid #9DC6F2;">
		<div style="position:absolute;top:0px;left:10px;width:120px;height:50px;line-height:60px;font-size: 18px;font-weight: bold;">自定义断面</div>
		<div onclick=closeDialog() style="position:absolute;top:10px;right:5px;width:17px;height:17px;background:url(../images/dialog_close.png) no-repeat;cursor:pointer;"></div>
	</div>
	<div style="position: absolute;top: 50px;left: 0px;height: 50px;line-height: 50px;width: 100%;display: inline-block;">
		<div style="display: inline-block;position: absolute;left: 8%;transform: translate(-8%, 0);">
			<label><span style="color: red">*</span> 定义断面名称</label>
			<input id="sectionName" class="form-control" style="width: 130px;display: inline-block;margin-left: 5px;">
		</div>
		<div style="display: inline-block;position: absolute;left: 50%;transform: translate(-50%, 0);">
			<label><span style="color: red">*</span> 正向传输容量(MVA)</label>
			<input id="forwardCap" class="form-control" onkeyup="onlyNum(event, this)" onafterpaste="onlyNum(event, this)" style="width: 130px;display: inline-block;margin-left: 5px;">
		</div>
		<div style="display: inline-block;position: absolute;right: 8%;transform: translate(8%, 0);">
			<label><span style="color: red">*</span> 反向传输容量(MVA)</label>
			<input id="reverseCap" class="form-control" onkeyup="onlyNum(event, this)" onafterpaste="onlyNum(event, this)" style="width: 130px;display: inline-block;margin-left: 5px;">
		</div>
	</div>
	<div style="position: absolute;top: 100px;left: 0px;height: 50px;line-height: 50px;width: 100%;display: inline-block;">
		<div style="display: inline-block;position: absolute;left: 10%;transform: translate(-3%, 0);">
			<label>线路检索</label>
			<input id="lineName" class="form-control" style="width: 130px;display: inline-block;margin-left: 5px;">
			<div id="searchLine" style="display: inline-block;width: 24px;margin-left: 5px;cursor: pointer;">
				<img src="../images/search.png">
			</div>
		</div>
	</div>
	<div class="ppBody">
        <div id="transfer"></div>
	</div>
	<div style="position: absolute;bottom: 0px;left: 0px;height: 50px;line-height: 50px;width: 100%;text-align: right;padding-right: 20px;">
		<button id="canelBtn" class="btn btn-info btn-sm" style="margin-right: 10px;" onclick=closeDialog()>取消</button>
		<button id="saveBtn" class="btn btn-info btn-sm">添加断面</button>
	</div>
</div>
</body>
</html>